<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
        />
        <Editor
                style="height: 100px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
        />
    </div>
</template>
<script>

    import Vue from 'vue'
    import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

    export default Vue.extend({
        components: {Editor, Toolbar},
        data() {
            return {
                editor: null,
                html: '',
                toolbarConfig: {
                    "customUploadImgShowBase64":true
                },
                editorConfig: {placeholder: '请输入内容...'},
                mode: 'default', // or 'simple'
                content: ''
            }
        },
        props: ['raceId'],
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
        },
        mounted() {
            this.content = this.editor.getText();
            console.log(this.content)
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    })
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>